<template>
    <ul class="singer-mv">
       <li v-for="(item,index) in list" :key="index">
          <div class="mv-img" @click="toMvDetail(item.mv_mid)">
              <img :src="item.mv_pic" alt="">
              <div class="icon">
                <span class="iconfont icon-bofang1"></span>
              </div>
          </div>
          <div class="mv-title ellipsis" @click="toMvDetail(item.mv_mid)">{{item.mv_title}}</div>
          <div class="mv-play">
            <span class="iconfont icon-tuya-"></span>
            <span class="count">{{item.listen_str}}</span>
          </div>
       </li>
    </ul>
</template>

<script>
    export default {
        name: "SingerMv",
        props:{
          list:Array
        },
        methods:{
          toMvDetail(mid){
            this.$router.replace('/mvdetail/'+mid)
          }
        }

    }
</script>

<style scoped lang="less">
.singer-mv{
  >li{
    display: inline-block;
    width: 284px;
    line-height: 1.5;
    font-size: 14px;
    margin: 10px 16px 10px 0px;
    .mv-img{
      height: 161px;
      position: relative;
      overflow: hidden;
      &:hover{
        &:after{
          content: '';
          display: block;
          width: 285px;
          height: 161px;
          position: absolute;
          top:0;
          left: 0;
          background: #000;
          opacity: 0.2;
          /*解决存在蒙层还能点击的问题*/
          pointer-events:none;
        }
        .icon{
          transform: scale(1.3);
          opacity: 1;
        }
        >img{
          transform: scale(1.2);
        }
      }
      >img{
        width: 100%;
        height: 100%;
        transition: all 0.6s;
      }
      .icon{
        position: absolute;
        margin: auto;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-radius:50%;
        width: 35px;
        height: 35px;
        opacity: 0;
        transition:  all 1s;
        .icon-bofang1{
          display: inline-block;
          font-size: 25px;
          margin-left: 6px;
          margin-top: 2px;
        }
      }
    }
    .mv-title{
      &:hover{
        color: #31c27c;
        cursor: pointer;
      }
    }
    .mv-play{
        color: #999;

    }
  }
}
</style>
